<template>
	<div class="customer" style="padding: 40px 20px 40px 0">

		<div style="width: 85%;">
			<el-row style="margin-bottom: 20px;">
				<el-col :span="24">
					<div style="display: flex;justify-content: space-between;border: 1px solid #DCDCCC;background-color: #FFFFFF;">
						<div class="allSort" style="">
							全部分类
						</div>
						<el-button style="align-self: center;margin-right: 30px;" type="primary" @click="add()">+添加
						</el-button>
					</div>
				</el-col>
			</el-row>

			<el-table :data="pageInfo.dtos" v-loading="table_loading" @sort-change='order' element-table_loading-text="加载中"
			 style="width: 100%">
				<el-table-column prop="cateName" label="分类名称">
				</el-table-column>
				<el-table-column prop="goodsNum" label="商品数量">
				</el-table-column>
				<el-table-column label="排序值">
					<template scope="scope">
						<el-input v-model="scope.row.cateSort" style="width: 100px;" @blur="editOrder(scope.row,$event)" @focus="setOldProbability(scope.row)"></el-input>
					</template>
				</el-table-column>
<!-- 				<el-table-column label="二级分类">
					<template scope="scope">
						<span style="color: #128BE5;text-decoration: underline;cursor: pointer;" @click="second(scope.row)">二级分类</span>
					</template>
				</el-table-column> -->
				<el-table-column prop="upd_Time" sortable='custom' label="最后编辑时间">
					<template scope="scope">
						<span>{{ scope.row.updTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250">
					<template scope="scope">
						<el-button size="small" type="primary" @click="detail(scope.row)">编辑
						</el-button>
						<el-button type="danger" size="small" @click="handleDelete(scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="paginate">
				<el-pagination @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
				 layout="total, prev, pager, next, jumper" :total="pageInfo.count">
				</el-pagination>
			</div>


		</div>
		<!--  -->
		<div class="tan_bg" v-show="dialogVisible">
		</div>
		<div v-show="dialogVisible" style="z-index:2; padding: 20px;border: 1px solid #CCCCCC;background: white;height: 240px;width:30%;position: fixed;top: 30%;left: 35%;">
			<div style="display: flex;justify-content: space-between;">
				<div>新增/编辑商品分类</div>
				<i @click="del_tankuang" class="el-icon-close"></i>
			</div>
			<div class="row" style="margin-top: 50px;">
				<div>商品分类</div>
				<el-input auto-complete="off" v-model="form.cateName" style="width: 70%;margin-left: 10px;" :maxlength="50"></el-input>
			</div>
			<div style="text-align: center;margin-top: 30px;">
				<el-button type="primary" @click="onSubmit()" :disabled="!form.cateName" :loading="loading">保 存
				</el-button>
			</div>
		</div>

		<!--  -->
		<!-- <el-dialog title="新增/编辑商品分类" v-show="dialogVisible" >
		
             <el-form :model="form" style="background-color: #FFFFFF;padding-top: 20px;">
                <el-form-item label="商品分类：" label-width="100px">
                    <el-input auto-complete="off"  v-model="form.cateName" style="width: 80%;" :maxlength="50"></el-input>
                </el-form-item>
             </el-form>
             <div style="text-align: center">
                 <el-button type="primary" @click="onSubmit()" :disabled="!form.cateName" :loading="loading">保 存
                 </el-button>
             </div>
            
        </el-dialog> -->

	</div>
</template>
<style>
	.allSort {
		align-self: center;
		padding: 20px 30px;
		border-top: 4px solid #3A93C0;
		border-right: 1px solid #DCDCCC;
	}
</style>
<script>
	export default {
		data() {
			return {
				formInline: {
					pageNum: 1,
					sort: 'CATE_SORT',
					desc: 'DESC',
					pageSize: 10,
					cateParentId: 0,
					storeId: '',
					cateState: '1',
					cateType: '1'
				},
				pageInfo: {
					pageNum: 1,
					pageSize: 10,
					count: 1,
					dtos: []
				},
				dialogVisible: false,
				table_loading: false,
				form: {
					cateId: '',
					cateName: '',
					storeId: '',
					cateParentId: 0,
					cateType: '1',
					cateState: '1',
					cateShow: '1',
					cateSort: '0'
				},
				URL: URL,
				loading: false,
				storeId: ''
			}
		},
		created() {
			this.fetchData(this.pageInfo.pageNum);
		},

		methods: {
			fetchData(page = 1) {
				this.table_loading = true;
				this.pageInfo.pageNum = page
				this.formInline.pageNum = this.pageInfo.pageNum
				this.dataApi.ajax('selectPageGoodCate', this.formInline, res => {
					this.table_loading = false;
					if (res.responseType === 'S') {
						this.pageInfo = res
						// console.log(this.pageInfo,'pageInfo')
					}
				});

			},
			add() {
				this.dialogVisible = true
				this.form = {
					cateName: '',
					storeId: this.storeId,
					cateParentId: 0,
					cateType: '1',
					cateState: '1',
					cateShow: '1',
					cateSort: '0'
				}
			},
			del_tankuang() {
				this.dialogVisible = false
			},
			onSubmit() {
				let obj = generateObj(this.form)
				this.loading = true
				if (obj.cateId) {
					this.dataApi.ajax('editGoodCate', obj, res => {
						if (res.responseType === 'S') {
							this.showMsg('修改成功')
							this.loading = false
							this.dialogVisible = false
							this.fetchData(this.pageInfo.pageNum)
						}
					});
				} else {
					this.dataApi.ajax('addGoodCate', obj, res => {
						if (res.responseType === 'S') {
							this.showMsg('添加成功')
							this.loading = false
							this.dialogVisible = false
							this.fetchData(this.pageInfo.pageNum)
						}
					});
				}

			},
			editOrder(item) {
				if (Math.floor(item.cateSort) <= 0) {
					item.cateSort = item.OldProbability || 0;
					return false;
				}
				if (item.OldProbability == item.cateSort) return false;
				if (!isNumber(item.cateSort)) {
					this.showMsg('只能输入数字', 'warning')
					item.cateSort = item.OldProbability
					return false;
				}
				// if (item.sortValue > this.pageInfo.totalRows){
				//    this.showMsg('排序值不能大于总数','warning')
				//    item.sortValue=item.OldProbability
				//    return false;
				// }

				var data = {
					cateId: item.cateId,
					cateSort: item.cateSort
				}
				this.dataApi.ajax('editGoodCate', data, res => {
					if (res.responseType === 'S') {
						this.showMsg('修改成功')
						this.fetchData(this.pageInfo.pageNum)
					}
				});
			},
			detail(item) {
				this.dialogVisible = true
				this.form = {
					cateId: item.cateId,
					cateName: item.cateName
				}
			},
			handleCurrentChange(val) {
				this.fetchData(val)
			},
			order(column) {
				if (!column.order) {
					return;
				}
				if (column.order == 'ascending') {
					this.formInline.desc = 'ASC'
				} else {
					this.formInline.desc = 'DESC'
				}
				this.fetchData(this.pageInfo.pageNum)
			},
			handleDelete(item) {
				if(item.goodsNum > 0) {
					this.showMsg('无法删除，此分类中包含' + item.goodsNum +
					 '个商品,请将商品移除或更改分类后再次删除')
					return
				}
				this.$confirm('确认删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					
					this.dataApi.ajax('editGoodCate', {
						cateId: item.cateId,
						cateState: 2
					}, res => {
						if (res.responseType === 'S') {
							this.showMsg('删除成功')
							this.fetchData(this.pageInfo.pageNum)
						}
					});
				}).catch(() => {

				});
			},
			second(item) {
				this.$router.push('/mall/second_list?cateParentId=' + item.cateId + '&&name=' + item.cateName)
			},
			setOldProbability(item) {
				item.OldProbability = item.cateSort
			},
		}
	}
</script>
